<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../cwjy/css/app.css" rel="stylesheet">
    <style>
        html::-webkit-scrollbar {
            display: none
        }

        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
</head>
<script src="../cwjy/js/app.js"></script>
<script src="../cwjy/js/jquery.min.js"></script>
<body>
<div class="row">
    <div class="col-12 col-md-12 col-lg-12">
        <div class="card" style="text-align: center">
            <div class="card-body">
                <div>
                    <img src="../cwjy/img/avatars/avatar-5.jpg"
                         style="width: 200px;height: 200px;border-radius:50%; overflow:hidden;" id = "images">
                </div>
                <div style="margin-top: 10px">
                    <!--<a href="javascript:;" class="file">更换头像-->
                    <!--<input type="file" id="file">-->
                    <!--</a>-->
                    <button data-toggle="modal"
                            data-target="#defaultModalPrimary" type="button">更换头像
                    </button>
                </div>
            </div>
        </div>
        <div class="card" style="text-align: center">
            <div class="card-header" style="font-weight: bold;font-size: 20px;text-shadow: 1px 1px 2px #000000;">
                基本信息
            </div>
            <div class="card-body" style="font-weight: bold;font-size: 15px;text-shadow: 1px 1px 2px #000000;">
                <p><span>姓&emsp;&emsp;名</span><span style="margin-left: 2%" id="name">无法无天</span></p>
                <p><span>用&ensp;户&ensp;名</span><span style="margin-left: 2%" id="username">无法无天</span></p>
                <p><span>家庭住址</span><span style="margin-left: 2%" id="home_address">无法无天</span></p>
                <p><span>联系电话</span><span style="margin-left: 2%" id="phone">无法无天</span></p>
                <p><span>性&emsp;&emsp;别</span><span style="margin-left: 2%" id="sex">无法无天</span></p>
                <p><span>年&emsp;&emsp;龄</span><span style="margin-left: 2%" id="age">无法无天</span></p>
            </div>
        </div>
    </div>
</div>

<!--模态框-->

<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 130%;margin-left: -10%">
            <div class="modal-header" id="modelHead">
                <h3 class="modal-title" id="modelHeadText" style="font-weight: bold;text-shadow: 1px 1px 3px #000000;">
                    更换头像</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body m-3">
                <div class="card-body" id="modelDiv" style="margin-top: -6%;font-weight: bold;">
                    <div style="text-align: center">
                       <img id = "topImages">
                    </div>
                    <div style="text-align: center;margin-top: 10px">
                        <a href="javascript:;" class="file">选择文件
                            <input type="file" id="image_path" onchange = "ImageTop()">
                        </a>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="modelAction">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateImages()">提交</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../cwjy/js/ajaxAll.js"></script>
<script type="text/javascript">
    function ImageTop() {
        var fils = $("#image_path").get(0).files[0];
        var srcc = window.URL.createObjectURL(fils);
        $('#topImages').attr("src", srcc)
        $('#topImages').css("width", "300")
        $('#topImages').css("height", "300")
        $('#topImages').css("margin-top", "10px")
    }
    function updateImages() {
        var myform = new FormData();
        myform.append('file', $("#image_path")[0].files[0]);
        myform.append('username',"324");
        let url = "http://localhost:8888/cwjy/user/updateImages";
        let success = "修改成功！";
        let error = "修改失败";
        ajaxUnifiedCallUpdateAndAddFormData(url,myform,success,error)
    }


    let grzxDataCache;


    function getGrzxData() {
        $.ajax({
            type: 'post',
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: 'http://localhost:8888/cwjy/user/getUsername',    //请求发送到Servlet
            contentType: 'application/json;charset=UTF-8',//指定消息请求类型
            data: JSON.stringify({}),
            timeout: 10000,    //超时10s
            success: function (res) { returnLogin(res);
                grzxDataCache = res.data;
                forEachgrzxDataCache()
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert('数据请求失败!');
            }
        });
    }

    function forEachgrzxDataCache() {
        $('#name').html(grzxDataCache.name);
        $('#username').html(grzxDataCache.username);
        $('#home_address').html(grzxDataCache.home_address);
        $('#phone').html(grzxDataCache.phone);
        $('#sex').html(grzxDataCache.sex);
        $('#age').html(grzxDataCache.age);
        $('#images').attr("src","http://localhost:8888/cwjy/images/"+grzxDataCache.images_path)
    }


    getGrzxData();
</script>
</body>
</html>